<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>消防设施</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link th:href="@{../assets/css/page.css}" rel="stylesheet" />
<link th:href="@{../assets/css/NGR.css}" rel="stylesheet" />
<!--[if lt IE 9]>
	<script th:src="@{../assets/js/html5shiv.js}"></script>
	<script th:src="@{../assets/js/respond.min.js}"></script>
<![endif]-->
<!-- <style>
.inside-header {
	    background:url(../assets/img/home/home.png);
	    width:100%;
	    height: 100%;
	    background-repeat : no-repeat;
	    background-color: #DAE8F5;
	}


</style>
 -->
 <style>
    .clicked{background-color:#34b4e3;
    width: 200px;  
        padding:8px;  
        border-color: #357ebd;  
        color: #fff;  
        -moz-border-radius: 1px;  
        -webkit-border-radius: 1px;  
        border-radius: 10px; /* future proofing */  
        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
        text-align: center;  
        vertical-align: middle;  
        border: 1px solid transparent;  
        font-weight: 900;  
        font-size:125%  
    }
    
    
     .unclicked {  
        width: 200px;  
        padding:8px;  
        background-color: #428bca;  
        border-color: #357ebd;  
        color: #fff;  
        -moz-border-radius: 1px;  
        -webkit-border-radius: 1px;  
        border-radius: 10px; /* future proofing */  
        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
        text-align: center;  
        vertical-align: middle;  
        border: 1px solid transparent;  
        font-weight: 900;  
        font-size:125%  
      }  
  .unclicked1 {  
        width: 100px;  
        padding:8px;  
        background-color: #428bca;  
        border-color: #357ebd;  
        color: #fff;  
        -moz-border-radius: 1px;  
        -webkit-border-radius: 1px;  
        border-radius: 10px; /* future proofing */  
        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
        text-align: center;  
        vertical-align: middle;  
        border: 1px solid transparent;  
       
      }
      
  .ssmc{
       border-right: #ffffff 0px solid;
     border-top: #ffffff 0px solid;
     font-size: 9pt; /*www.52css.com*/
     border-left: #ffffff 0px solid;
     border-bottom: #c0c0c0 1px solid;
     background-color: #ffffff
  }
</style>
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">

<div class="widget-body no-padding">



<div id="map" style="width: 100%; height: 100%; margin: 0; padding: 0; position:absolute;background-color: #DAE8F5;">
	

</div>
<div style="position:absolute;width: 110px;height: 60px; background: #DAE8F5; margin-left: 70%;margin-top: 20px;">
	<input class="unclicked"  id="addfire" type="button" style="height: 60px;width: 110px;"  value="绘制消防设施"  />
		
	
	</div>


</div></div>
<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/NGR.min.js}"></script>
<script type="text/javascript">
var markersLayer_show;
   var floor_id=1817480;
  var clat="";
  var clng="";
  var cx="";
  var cy="";
  var value=0;
(function () {
window.map = new NGR.View('map', {
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.res = new NGR.DataSource({
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.layers = {};
 window.marker_show={};
  var mapId = 2033;
 	var b=false;
  var control = NGR.control.floor();
 var markersLayer = NGR.layerGroup();
	markersLayer_show= NGR.layerGroup();
  var onerror = function (e) {
    console.error(e, e.stack);
  };
var addMarker = function () {
// 初始化marker
  var marker = NGR.marker(NGR.latLng(lat, lng), {
    icon: NGR.icon({
      iconUrl: '../assets/fonts/images/marker_icon@2x.png',
      iconSize: [15, 15],
    }),
  });

 markersLayer.addLayer(marker);
};

document.getElementById("addfire").onclick=function(){
	 
	if(b==false){
	b=true
	document.getElementById("addfire").setAttribute('class','clicked');
	}else{
	b=false
	document.getElementById("addfire").setAttribute('class','unclicked');
	};

}


// 请求楼层数据
  var loadPlanarGraph = function (planarGraphId) {
    res.requestPlanarGraph(planarGraphId).then(function (layerInfo) {
      console.log(layerInfo);
      NGR.IO.fetch({
        url: '../assets/fonts/style.template.json',
        onsuccess: JSON.parse
      }).then(function (style) {
		map.clear();
		
		layers.frame = NGR.featureLayer(layerInfo, {
            layerType: 'Frame',
            styleConfig: style
        });
         map.addLayer(layers.frame); // 将楼层框架图层添加到地图中去
        // 准备商铺图层
        layers.area = NGR.featureLayer(layerInfo, {
            layerType: 'Area',
            styleConfig: style
        });
        map.addLayer(layers.area); // 将商铺图层添加到地图中去
        
        // 准备商铺文字和图标图层
        layers.annotation = NGR.featureLayer(layerInfo.Area, {
            layerType: 'LogoLabel',
            styleConfig: style
        });
        // 准备公共设施图标图层
        layers.facility = NGR.featureLayer(layerInfo.Facility, {
            layerType: 'Facility',
            styleConfig: style
        });
        // 准备碰撞检测图层组
        layers.collision = NGR.layerGroup.collision({
            margin: 3
        });
        layers.collision.addLayer(layers.annotation); // 将商铺文字和图标图层添加到碰撞检测图层组中去
        layers.collision.addLayer(layers.facility); // 将公共设施图标图层添加到碰撞检测图层组中去
        map.addLayer(layers.collision); // 将碰撞检测图层组添加到地图中去
          map.addLayer(markersLayer);
           map.addLayer(markersLayer_show);
        map.render();   // 所有图层都添加到地图后，渲染地图 
      }).fail(onerror);
    }).fail(onerror);
  };

map.on('click', function (e) {

// 初始化marker
if(b){
	markersLayer.clearLayers();
	
  var marker = NGR.marker(e.latlng, {
    icon: NGR.icon({
      iconUrl: '../assets/img/fire.png',
      iconSize: [25, 25]
    }),
	title:"消防设施",
	draggable: true
  });
	clat=marker._latlng.lat;
	clng=marker._latlng.lng;
	cx=NGR.CRS.EPSG3857.project(e.latlng).x;
	cy=NGR.CRS.EPSG3857.project(e.latlng).y
 var popup = NGR.popup({
	closeButton:false
})
    .setLatLng(e.latlng)
    .setContent('设施名称：<input class="ssmc" style="width:150px;" id="cname" /><br />是否可用：<input name="useable"  type="radio" value="0" onclick="getValue(this)" />可用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="useable" type="radio" value="1" onclick="getValue(this)" />不可用<br />使用说明：<input type="text" id="cremark" style="width:150px;"/><br /><input class="unclicked1" id="save" type="button" value="保存"/><input class="unclicked1" id="cancel" type="button" value="取消"/>')
    .openOn(map);
 	markersLayer.addLayer(marker);
}
document.getElementById("cancel").onclick=function(){
markersLayer.clearLayers();
map.closePopup(popup);
}
document.getElementById("save").onclick=function(){
		
		var cname=$("#cname").val();
		var cremark=$("#cremark").val();
		var url="../firecontrolfacilities/addItem";
		  $.ajax({
                url:url,
                type:"post",
                dataType:"json",
                data:{
                "cname":cname,
                "cremark":cremark,
                "ifloor":floor_id,
                "istatus":value,
                "clat":clat,
                "clng":clng,
                "cx":cx,
                "cy":cy
                },
                success:function (data) {
               
                 alert(data.retmsg);
				 window.location.reload();
                  
                },
                error:function (error) {
					
                }
            })
	
}
})

// 请求地图数据
  res.requestMap(mapId).then(function (mapInfo) {
    res.requestPOIChildren(mapInfo.poi).then(function(floors) {
      // 初始化楼层控件
      map.addControl(control);
      control.on('change', function (e) {
		markersLayer_show.clearLayers();
		$.ajax({
                url:"../firecontrolfacilities/findItems",
                type:"post",
                dataType:"json",
                data:{
                "ifloor":e.to
                },
                success:function (data) {
               		pub(data); 
                },
                error:function (error) {
					
                }
            })
        control.setCurrentFloor(e.to, loadPlanarGraph);
			floor_id=e.to;
      });
	
      control.setFloorList(floors);
		$.ajax({
                url:"../firecontrolfacilities/findItems",
                type:"post",
                dataType:"json",
                data:{
                "ifloor":floors[4].id
                },
                success:function (data) {
               		pub(data);
                },
                error:function(error) {
					
                }
            })
      control.setCurrentFloor(floors[4].id, loadPlanarGraph);

    }).fail(onerror);
  }).fail(onerror);

}).call(this);

function getValue(obj){    
     value = obj.value;  
   
} 


function pub(data){
				//<![CDATA[
               		for(var i=0;i<data.length;i++){
               		if(data[i].istatus==0){
               			 var tempmarker =NGR.marker([data[i].clat,data[i].clng],{
					    	icon: NGR.icon({
					      iconUrl: '../assets/img/fire.png',
					      iconSize: [25, 25]
					    })
					  });
					}else{
					 var tempmarker =NGR.marker([data[i].clat,data[i].clng],{
					    	icon: NGR.icon({
					      iconUrl: '../assets/img/firered.png',
					      iconSize: [25, 25]
					    })
					  });
					
					}
					marker_show[tempmarker._ngr_id]=tempmarker;
					marker_show[tempmarker._ngr_id].obj=data[i];
					marker_show[tempmarker._ngr_id].on("click",function(e){
					var id=e.target._ngr_id;
					var popup_show = NGR.popup({
						closeButton:true,
						height:550
					})
					    .setLatLng(e.latlng)
					    .setContent('<div>设施名称：<a class="ssmc" style="width:150px;" id="cname'+id+'" ></a><br />是否可用：<a  id="use'+id+'"  " /></a><br />使用说明：<a type="text" id="cremark'+id+'" style="width:150px"/></a><br /><input class="unclicked1" id="delete'+id+'" type="button" value="删除"/><input class="unclicked1" id="cancel'+id+'" type="button" value="取消"/></div>')
					    .openOn(map);
					    $("#cname"+id).html(this.obj.cname);
					    $("#cremark"+id).html(this.obj.cremark);
					    value=this.obj.istatus;
					    if(this.obj.istatus==0){
					     $("#use"+id).html("可用");
					    }else{
					      $("#use"+id).html("不可用");
					    }
					    var iid=this.obj.iid;
					     document.getElementById("cancel"+id).onclick=function(){
					      map.closePopup(popup_show);
					     }
					    document.getElementById("delete"+id).onclick=function(){
					    var b=confirm("确认删除该设施吗？");
					    if(b){
								var url="../firecontrolfacilities/delItem";
								  $.ajax({
						                url:url,
						                type:"post",
						                dataType:"json",
						                data:{
						                "ids":iid
						                },
						                success:function (data) {
						                // map.closePopup(popup);
						                  	alert(data.retmsg);
						                    window.location.reload();
						                },
						                error:function (error) {
						                }
						            })
						            }else{
						            map.closePopup(popup_show);
						            }
							}
					})
               		markersLayer_show.addLayer(marker_show[tempmarker._ngr_id]);
               		}
               		//]]> 
}
</script>
</body></html>

